<template>
  <div class="home">
    <div class="header"><img :src='logo1'></div>
    <div class="banner"><img :src='banner1'></div>
    <div class="chanpin_title"><img :src='chanpin_title1'></div>
    <!--<mt-radio-->
    <!--title="radio list"-->
    <!--v-model="value"-->
    <!--:options="['购买', '租用']">-->
    <!--</mt-radio>-->
    <div class="rows clearfix">
      <label class="head left">选择租售</label>
      <div class="rows-params left"> <span class="alizi-radio-group"> <span class="alizi-radio">
        <input id="gm" name="bdproductb" class="cmiq001" type="radio" tip="goumai" value="购买" checked=""
               @click="choice(1)">
        <label for="购买"></label>
        </span> 购买 </span> <span class="alizi-radio-group"> <span class="alizi-radio">
        <input id="zy" name="bdproductb" class="cmiq001" type="radio" tip="zuyong" value="租用" @click="choice(2)">
        <label for="租用"></label>
        </span> 租用 </span></div>
    </div>

    <!--购买-->
    <div class="goumai" style="" v-if="flag == 1">
      <div class="cldxbox product">
        <div class="prolist">
          <label for="bdproduct1">
            <div class="product_li_img"><img :src="goods1" width="100%"></div>
            <input type="radio" @click="goods(1)" name="bdproduct" class="cmiq002" id="bdproduct1" value="舒雅型"
                   alt="450">
            <p>舒雅型</p>
          </label>
        </div>
        <div class="prolist">
          <label for="bdproduct2">
            <div class="product_li_img"><img :src="goods2" width="100%"></div>
            <input type="radio" @click="goods(2)" name="bdproduct" class="cmiq002" id="bdproduct2" value="智雅型"
                   alt="580">
            <p>智雅型</p>
          </label>
        </div>
        <div class="clearfix"></div>
      </div>
      <div class="rows clearfix">
        <label class="head left">订购数量</label>
        <div class="rows-params" zuyong_sl="" zuyong_price="">
          <div class="left">
            <span class="bdnum-dec" @click="calculation(1)">-</span>
            <input type="tel" class="quantity" size="4" v-model="goodsnum" name="bdnum">
            <span class="bdnum-inc" @click="calculation(2)">+</span>
          </div>
        </div>
      </div>
      <div class="rows clearfix" style="display:none;">
        <label class="head left">产品单价</label>
        <div class="rows-params"><span><i class="alizi-dan-price bright"></i>元</span></div>
      </div>
      <div class="rows clearfix">
        <label class="head left">产品价格</label>
        <div class="rows-params"><span><i class="alizi-total-price bright"> {{goodsvalue}}</i>元</span></div>
      </div>
    </div>

    <!--租用-->
    <div class="zuyong" v-if="flag == 2">
      <div class="cldxbox product">
        <div class="prolist" zuyong_sl="1" zuyong_price="450">
          <label for="bdproduct1">
            <div class="product_li_img"><img :src="goods1" width="100%"></div>
            <input type="radio" name="bdproduct" @click="goods(3)" class="cmiq002" id="bdproduct1" value="舒雅型"
                   alt="450">
            <p>舒雅型</p>
          </label>
        </div>
        <div class="clearfix"></div>
      </div>
      <div class="rows clearfix">
        <label class="head left">租用数量</label>
        <div class="rows-params" zuyong_sl="" zuyong_price="">
          <div class="left">
            <span class="bdnum-dec" @click="calculation(1)">-</span>
            <input type="tel" class="quantity" size="4" v-model="goodsnum" name="bdnum">
            <span class="bdnum-inc" @click="calculation(2)">+</span>

          </div>
        </div>

      </div>
      <div style="font-size:0.75rem; color:#F00">（注释：5天，135元；7天，181元；7天以上，按23元/天租金顺加计费。租金从押金里扣除，产品归还后，扣除租金后押金将原路返还。)
      </div>
      <!--  <div class="rows clearfix">
          <label class="head left">租用押金</label>
          <div class="rows-params"> <span><i class="alizi-dan-price bright"></i>元</span> </div>
        </div>-->
      <div class="rows clearfix">
        <label class="head left">租用押金</label>
        <div class="rows-params"><span><i class="alizi-total-price bright">{{goodsvalue}}</i>元</span></div>
      </div>
    </div>
    <div class="yuding_title"><img :src="yuding_title"></div>
    <div class="rows clearfix">
      <label class="head left">就诊医院</label>
      <div class="rows-params">
        <!--@change="Hospital"-->
        <el-select v-model="Doctorhospital" placeholder="请选择">
          <el-option
            v-for="item in options2"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>

      </div>
    </div>
    <div class="rows clearfix">
      <label class="head left">就诊疾病</label>
      <div class="rows-params">
        <el-select v-model="disease" placeholder="请选择">
          <el-option
            v-for="item in options3"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
      </div>
    </div>
    <div class="rows clearfix">
      <label class="head left">顾客姓名</label>
      <div class="rows-params">
        <input type="text" name="bdname" placeholder="请填写姓名" v-model="username" autocomplete="off"
               class="input-text left">
      </div>
    </div>
    <div class="rows clearfix">
      <label class="head left">联系方式</label>
      <div class="rows-params">
        <input type="number" name="bdmob" placeholder="请填写手机号码" v-model="phone" autocomplete="off"
               class="input-text left">
      </div>
    </div>
    <div class="rows clearfix">
      <label class="head left">支付方式</label>
      <div class="rows-params">
        <a class="alizi-radio-group"> <span class="alizi-radio">
        <input class="payments" alizi-key="2" id="pay2" name="bdpay" type="radio" value="微信支付" checked="">
        <label for="pay2"></label>
        </span> <img :src="fkd"> </a>
      </div>
    </div>
    <div style="margin:10px auto; width:100%; text-align:center">
      <button type="bumit" name="bdsubmit" class="btn-submit btn btn-cyan" @click="submit">确认提交</button>
    </div>
    <div class="footer">
      <!--<div class="ft_img"><img :src="ft_top"></div>-->
      <!--<div class="banquan">-->
        <img :src="tl1" class="tling_">
        <!--科贝康<span>&#174;</span>便携式微网雾化机</div>-->
      <!--<div class="banquan_info">尊敬的用户您好，非常高兴您选择了科贝康<span>&#174;的产品，填写完资料确认提交后，-->
    <!--十分钟内将有工作人员电话联系您以及尽快安排把科贝康&#174;便携式微网雾化机送到您手上.</span>-->
      <!--</div>-->
    </div>
    <el-dialog
      title="提示"
      :visible.sync="dialogVisible"
      width="80%">
      <p>{{thistext}}{{laval}}</p>
      <span slot="footer" class="dialog-footer">
    <!--<el-button @click="dialogVisible = false">取 消</el-button>-->
    <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
  </span>
    </el-dialog>
  </div>
</template>
<script>
  import logo from '~/logo.jpg';
  import banner from '~/banner_06.jpg';
  import fkd from '~/fkd.gif';
  import ft_top from '~/ft_top_12.jpg';
  import goods1 from '~/goods1.jpg';
  import goods2 from '~/goods2.jpg'
  import yuding_title from '~/yuding_title_09.jpg';
  import chanpin_title from '~/chanpin_title.jpg';
  import icon from '~/icon-right.png';
  import tl from '~/tl.jpg';
  import {Toast} from 'mint-ui';
  export default {
    components: {},
    data(){
      return {
        dialogVisible: false,
        logo1: logo,
        banner1: banner,
        fkd1: fkd,
        ft_top: ft_top,
        goods1: goods1,
        goods2: goods2,
        icon1:icon,
        tl1:tl,
        yuding_title: yuding_title,
        fkd: fkd,
        chanpin_title1: chanpin_title,
        flag: 1,
        value: '',
        goodsvalue: '', //商品价格
        goodsnum: 1,   //商品数量
        clickflag: 0,
        currentprice: 0,
        Doctorhospital: '',//就诊医院
        options2: [{
          value: '佛山市第一人民医院',
          label: '佛山市第一人民医院'
        }, {
          value: '佛山市妇幼保健院',
          label: '佛山市妇幼保健院',
        }, ],
        disease: '',//就诊疾病
        options3: [{
          value: '咳嗽',
          label: '咳嗽'
        }, {
          value: '哮喘',
          label: '哮喘',
        }, {
          value: 'COPD(慢性阻塞性肺病)',
          label: 'COPD(慢性阻塞性肺病)'
        }, {
          value: '支气管病',
          label: '支气管病'
        }, {
          value: '鼻/咽/喉炎',
          label: '鼻/咽/喉炎'
        }, {
          value: '其他疾病',
          label: '其他疾病'
        }],
        username: '', //用户姓名
        phone: '',//联系方式
        Commodity: '购买',//商品分类
        goodsname: '', //商品名称
        text: '',
        thistext:'',
        laval:'',
      }
    },
    methods: {
      choice(e){  //radio
        this.flag = e;
        switch (e) {
          case 1:
            this.Commodity = '购买';
            break;
          case 2:
            this.Commodity = '租用';
            break;
        }
      },
      goods(e){  //选择商品
        this.clickflag = 1;
        this.goodsnum = 1;
        switch (e) {
          case 1:    //购买舒雅
            this.goodsvalue = 780;
            this.currentprice = 780;
            // 520
            this.goodsname = '舒雅型';
            break;
          case 2://购买智雅
            this.goodsvalue = 960;
            this.currentprice = 960;
            this.goodsname = '智雅';
            break;
          case 3://租用舒雅
            this.goodsvalue = 780;
            this.currentprice = 780;
            this.goodsname = '舒雅型';
            break;
        }
      },
      calculation(e){  //计算
        if (this.clickflag == 1) {
          switch (e) {
            case 1:   //减
              if (this.goodsnum > 1) {
                this.goodsnum--;
                this.goodsvalue = this.goodsnum * this.currentprice;
              }
              break;
            case 2:  //加
              this.goodsnum++;
              this.goodsvalue = this.goodsnum * this.currentprice;
              break;
          }
        } else {
          Toast({
            message: '请选择商品',
            position: 'middle',
            duration: 3000
          });
        }
      },

      submit(){ //确认提交
        if (this.clickflag != 1) {
          Toast({
            message: '请选择商品',
            position: 'middle',
            duration: 3000
          });
          return false
        };
        if(this.Doctorhospital == ''){
          Toast({
            message: '请选择就诊医院',
            position: 'middle',
            duration: 3000
          });
          return false
        };
        if(this.disease == ''){
          Toast({
            message: '请选择就诊疾病',
            position: 'middle',
            duration: 3000
          });
          return false
        };
        var bdname = /^[\u4e00-\u9fa5]{2,6}$/;
        if(!bdname.test(this.username)){
          Toast({
            message: '姓名格式不正确，请重新填写！',
            position: 'middle',
            duration: 3000
          });
          return false
        };
        if (this.phone == "") {
          Toast({
            message: '请填写手机号码',
            position: 'middle',
            duration: 3000
          });
          return false;
        }
        var clform = /^1[3,4,5,7,8]\d{9}$/;
        if (!clform.test(this.phone)) {
          Toast({
            message: '手机号码格式不正确，请重新填写！',
            position: 'middle',
            duration: 3000
          });
          return false;
        }
        this.datasubmit();
        return true;
      },
      datasubmit(){
        this.http.post({
          'api': 'order',
          'data': {
            'data': {
              'goodsname': this.goodsname,
              'goodscount': this.goodsnum,
              'goodstotal': this.goodsvalue,
              'hospital': this.Doctorhospital,
              'disease': this.disease,
              'name': this.username,
              'phone': this.phone,
              'status': this.Commodity,
            }
          }
        }).then((res) => {
          if (res.data.data) {
            this.addmoneytrue(res.data.data)
          }
        }, (err) => {

        })
      },
      addmoneytrue(data) {
        WeixinJSBridge.invoke(
          'getBrandWCPayRequest', JSON.parse(data),
          (res) => {
            switch (res.err_msg) {
              case "get_brand_wcpay_request:ok":
                this.thistext = '支付成功';
                this.laval = '，很高兴您选择了科贝康便携式雾化器，十分钟内将有专员电话联系您以及会尽快把科贝康雾化机送到您手上。若有问题，请拨打电话020-29010236';
                this.dialogVisible = true;
                break;
              case "get_brand_wcpay_request:cancel":
                this.thistext = '取消支付';
                this.dialogVisible = true;
                this.laval ='';
                break;
              case "get_brand_wcpay_request:fail":
                this.thistext = '支付失败';
                this.laval ='';
                this.dialogVisible = true;
                break;
            }
            // 使用以上方式判断前端返回,微信团队郑重提示：res.err_msg将在用户支付成功后返回    ok，但并不保证它绝对可靠。
          }
        );
      },
    },
    watch: {  //监听
      goodsnum(s, r){
        this.goodsvalue = this.goodsnum * this.currentprice;
      },
    },
    computed: {
      //计算属性

    },
    mounted(){
      //生命周期
    }
  }
</script>
<style scoped>
  .home {
    width: 100%;
    height: 100%;
  }
  .tling_{
    width: 100%;
    height:100%;
    background-size: 100% 100%;
  }
  .alizi-radio input:checked + label:after{
    /*background: #52d40b url('icon1') center no-repeat;*/
    /*background-size: 16px;border-color: #52d40b;*/
  }
</style>
